<template>
    <hb-box :title="formTitle">
        <div class="Box">
            <div class="FormCon">
                <div class="Label" v-text="cardTitle" />
                <div class="imgCon">
                    <div class="pos cur">
                        <div class="uploadPos" v-show="isposUp">
                            <div class="delete" @click="deleteImg('pos')"></div>
                            <img class="uploadPosImg" ref="posImg" src="" alt="">
                        </div>
                        <div class="posmask" v-show="beginPosUp" @click="e_uploadpos">
                            <span v-text="Lang.identity[lang][0]">正面</span>
                        </div>
                    </div>
                    <div class="ant cur">
                        <div class="uploadPos" v-show="isantUp">
                            <div class="delete" @click="deleteImg('ant')"></div>
                            <img class="uploadAntImg" ref="antImg" src="" alt="">
                        </div>
                        <div class="antmask" v-show="beginantUp" @click="e_uploadant">
                            <span v-text="Lang.identity[lang][1]">反面</span>
                        </div>
                    </div>
                    <div class="self cur">
                        <div class="uploadPos" v-show="isselfUp">
                            <div class="delete" @click="deleteImg('self')"></div>
                            <img class="uploadSelfImg" ref="selfImg" src="" alt="">
                        </div>
                        <div class="selfmask" v-show="beginselfUp" @click="e_uploadself">
                            <span v-text="Lang.identity[lang][2]">手持正面</span>
                        </div>
                    </div>
                </div>
                <div class="Label" v-text="nameTitle" />
                <hb-input @ipt="e_ipt" formType="realname" back="realname" />
                <div class="Label" v-text="idTitle" />
                <hb-input @ipt="e_ipt" formType="idcard" back="idcard" />
                <div class="signupbtn cur" v-text="btnTitle" @click="e_auth" />
            </div>
            <input @change="poschange($event)" type="file" id="posimg" class="hidden" ref="posimg">
            <input @change="antchange($event)" type="file" id="antimg" class="hidden" ref="antimg">
            <input @change="selfchange($event)" type="file" id="selfimg" class="hidden" ref="selfimg">
        </div>
        <hb-dialog v-if="msgback !== ''" @clk="e_closeDialog" class="dialog">
            <h3 class="hmsg" v-text="msgback"></h3>
        </hb-dialog>
    </hb-box>

</template>

<script>
import {imgpost, vlink} from '@api'
import Lang from '../lang.js'
export default {
	name: 'Box',
	data() {
		return {
			posUrl: '',
			antUrl: '',
			selfUrl: '',
			imgList: [],
			size: 0,
			isposUp: false,
			beginPosUp: true,
			isantUp: false,
			beginantUp: true,
			isselfUp: false,
			beginselfUp: true,
			msgback: '',
			form: {
				realname: null,
				idcard: null,
			},
			checkRe: {
				realname: false,
				idcard: null,
			},
			Lang,
		}
	},
	computed:{
		lang() {
			return this.$store.state.setting.lang
		},
	},
	props: {
		formTitle: {
			default: '',
		},
		nameTitle: {
			default: '',
		},
		idTitle: {
			default: '',
		},
		btnTitle: {
			default: '',
		},
		cardTitle: {
			default: '',
		},
	},
	methods: {
		// 关闭提示框
		e_closeDialog() {
			this.msgback = ''
			this.clearCodeTimer = Math.random() * 2
		},
		// 身份证正面上传
		e_uploadpos() {
			document.getElementById('posimg').click()
		},
		// 身份证反面上传
		e_uploadant() {
			document.getElementById('antimg').click()
		},
		// 手持身份证上传
		e_uploadself() {
			document.getElementById('selfimg').click()
		},
		// 监听身份证正面上传
		poschange(el) {

			if (!el.target.files[0].size) return
			let target = el.target
			this.isposUp = true
			this.beginPosUp = false
			this.posUrl = el.target.files[0]
			this.$refs.posImg.src = this.getFileUrl(el.srcElement)
		},
		// 监听身份证反面上传
		antchange(el) {
			if (!el.target.files[0].size) return
			let target = el.target
			this.isantUp = true
			this.beginantUp = false
			this.antUrl = el.target.files[0]
			this.$refs.antImg.src = this.getFileUrl(el.srcElement)
		},
		// 监听身手持身份证上传
		selfchange(el) {
			if (!el.target.files[0].size) return
			let target = el.target
			this.isselfUp = true
			this.beginselfUp = false
			this.selfUrl = el.target.files[0]
			this.$refs.selfImg.src = this.getFileUrl(el.srcElement)
		},
		getFileUrl(obj) {
			let url
			url = window.URL.createObjectURL(obj.files.item(0))
			return url
		},
		// 删除上传的图片
		deleteImg(s) {
			if (s == 'pos') {
				this.$refs.posImg.src = ''
				this.isposUp = false
				this.beginPosUp = true
			} else if (s == 'ant') {
				this.$refs.antImg.src = ''
				this.isantUp = false
				this.beginantUp = true
			} else if (s == 'self') {
				this.$refs.selfImg.src = ''
				this.isselfUp = false
				this.beginselfUp = true
			}
		},
		// 获取收入框的内容
		e_ipt(re, inputed, back) {
			this.checkRe[back] = re
			this.form[back] = inputed
		},
		// 输入验证
		cheak(callback) {
			let authData = {
				filedata1: this.posUrl,
				filedata2: this.antUrl,
				filedata3: this.selfUrl,
				identityType: 1,
				realName: this.form.realname,
				identityNo: this.form.idcard,
			}

			if (authData.filedata1 == '') {
				this.msgback = '请上传身份证正面照片'
				return false
			}
			if (authData.filedata2 == '') {
				this.msgback = '请上传身份证反面照片'
				return false
			}
			if (authData.filedata3 == '') {
				this.msgback = '请上传手持身份证照片'
				return false
			}
			if (!authData.realName) {
				this.msgback = '请输入真实姓名'
				return false
			}
			if (!authData.identityNo) {
				this.msgback = '请输入身份证号'
				return false
			}
			callback(authData)
		},
		e_auth() {
			this.cheak(authData => {
				var param = new FormData()

				param.append('filedata1', authData.filedata1)
				param.append('filedata2', authData.filedata2)
				param.append('filedata3', authData.filedata3)
				param.append('identityType', authData.identityType)
				param.append('realName', authData.realName)
				param.append('identityNo', authData.identityNo)

				imgpost(vlink.auth, param).then(re => {
					if (re.status === 200) {
						this.msgback = re.data.msg
					}
					setTimeout(() => {
						this.e_closeDialog()
						location.reload()
					}, 1200)
				})
			})
		},
	},
}
</script>

<style scoped>
.Box {
	display: flex;
	justify-content: center;
}
.FormCon {
	width: 480px;
	/* height: 318px; */
}
.Label {
	margin-top: 30px;
	margin-bottom: 5px;
	color: #61688a;
	font-size: 12px;
}
.signupbtn {
	height: 48px;
	margin-top: 30px;
	margin-bottom: 40px;
	background-color: #7a98f7;
	border-radius: 4px;
	text-align: center;
	line-height: 48px;
	font-size: 16px;
	color: #fff;
}
.signupbtn:hover {
	background-color: #a0b6f9;
}
.imgCon {
	height: 125px;
	display: flex;
	flex-direction: row;
	justify-content: space-around;
}
.pos,
.ant,
.self {
	width: 125px;
	height: 125px;
	background-color: #1e2235;
	text-align: center;
	line-height: 125px;
	color: #c7cce6;
	border: 1px dashed #c7cce6;
}
.hidden {
	display: none;
}
.posmask {
	background: url('./images/pos.png') no-repeat 50%;
}
.antmask {
	background: url('./images/ant.png') no-repeat 50%;
}
.selfmask {
	background: url('./images/self.png') no-repeat 50%;
}
.uploadPos {
	width: 100%;
	height: 100%;
	position: relative;
}
.uploadPosImg,
.uploadAntImg,
.uploadSelfImg {
	width: 100%;
	height: 100%;
}
.delete {
	width: 20px;
	height: 20px;
	background-color: #7a98f7;
	position: absolute;
	right: 0;
	background: url('./images/close.png') no-repeat 50%;
	opacity: 0.6;
}
.dialog {
	color: var(--clr0);
}
.hmsg {
	padding: 0 20px;
}
</style>
